<template>
  <div class="login_container">
    <router-link to="/">
      <p class="title"><span>返回主页</span></p>
    </router-link>
    <div class="login_wrap">
      <Login />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';
import Login from './login';

export default {
  name: 'LoginPage',
  components: {
    Login,
  },
  setup() {
    const state = reactive({});

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.login_container {
  max-width: 100%;
  min-width: 1600px;
  height: 700px;
  background-image: url('../../assets/login/bg_img.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .title {
    padding-top: 1vh;
    padding-right: 2vw;
    font-size: 14px;
    text-align: right;
    color: #f2f2f2;
    cursor: pointer;
  }
  .login_wrap {
    position: relative;
    width: 1280px;
    margin: 0 auto;
  }
}
</style>
